<template>
  <!-- 父传子 -->
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ intro }}</p>
    <!-- 点点那个需要知道点的是那个索引也好，id也好只要可以知道是那个
    这次用的索引在点击事件后面带上参数索引 -->
    <button @click="subFn(index)">砍一刀</button>
  </div>
</template>

<script>
export default {
  // 因此在这里声明要传给父亲那边
  props: ['title', 'price', 'intro', 'index'],
  data () {
    return {

    }
  },
  methods: {
    subFn (thenIndex) {
      //  props里的变量，本身是只读的,所以我这个是错误的
      // 随机数====toFixed(2)保留两位小数
      // this.price = this.price - (Math.random() * 1).toFixed(2)
      // 子传父
      this.$emit('subPrice', thenIndex, (Math.random() * 1).toFixed(2))
      // 通知父组件自定义事件，把要看的商品索引传出来，本次砍多少钱，一起传给父组件
    }

  }
}
</script>

<style scoped>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>